<template>

    
    <Table :request="queryLeader" :reqParams="keyword" ref="table">
        <el-table-column>
            <template #header>
                <div style="display: flex;justify-content: center;">
                    <el-input placeholder="请输入关键字" style="width: 200px;" type="text" name="" id="" v-model="keyword.keyword" />

                </div>
            </template>
           <template #default>
            <el-table-column prop="lead_id" label="id" width="50" >
          
                </el-table-column>
                <el-table-column prop="truename" label="姓名" width="" />
                <el-table-column prop="age" label="年龄" />
                <el-table-column prop="gender" label="性别" />
                <el-table-column prop="" label="" width="250">
                    <template #header>
                        <el-button @click="addBtn()" size="small" type="primary" plain>批量添加</el-button>
                        <el-button @click="downloadExcel()" size="small" type="primary" plain>导出</el-button>
                    
                    </template>
                    <template #default="{row}">
                        <el-button @click="go(row)" size="small" type="primary" plain>详情</el-button>
                        <el-button size="small" type="success" plain>修改</el-button>
                        <el-popconfirm 
                        title="确定删除此村委吗?"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="del(row)"
                        >
                            <template #reference>
                                <el-button size="small" type="danger" plain>删除</el-button>
                            </template>
                        </el-popconfirm>
                        
                    </template>
                </el-table-column>
           </template>
        </el-table-column>
        
    </Table>

    <el-dialog
    v-model="openAdddialog"
    title="批量添加"
    width="60%"
    
  >
    <!-- <span>批量导入之前请使用模板，表格文件扩展名需.xls后缀</span> -->
    <el-alert title="批量导入之前请使用模板，表格文件扩展名需.xls后缀" type="success" />
    <div style="display: flex;justify-content: center;margin-top: 10px;">
        <el-button type="primary" @click="downloadModel()">下载模板</el-button>
        <!-- <el-button type="primary">下载模板</el-button> -->
         &nbsp;
         <el-upload
         :auto-upload="false"
         :on-change="change"
         >
            <el-button icon="UploadFilled" type="primary" plain>批量添加</el-button>
         </el-upload>
    </div>
   
  </el-dialog>
</template>
<script setup lang='ts'>
import {Table,TableInstance} from "../../components"
import {reactive,ref} from "vue"
import {queryLeader,deleteLeader,download,exportExcel,importExcel} from "../../api/countyment"
// import {TableInstance} from "../../components/"
import {ElMessage, UploadProps} from "element-plus"
import {downloadLocal} from "../../utils/func"
import router from "../../router"
const openAdddialog=ref<boolean>(false)
const table =ref<TableInstance>()
const del=async (row:Obj)=>{
    // console.log(table.value);
    // return
    let res:ResData=await deleteLeader({lead_id:row.lead_id}) as ResData

    if(res.code==200){
       ElMessage({
        type:'success',
        message:res.msg
       })
       // 调用table组件内置的方法 doRequest
       table.value?.doRequest(keyword)
    }
    
}
const addBtn=()=>{// 批量添加按钮
    openAdddialog.value=true
}

const downloadModel=async ()=>{
    // console.log(666);
    let res:BinaryData=await download() as BinaryData
    // console.log(res);
    downloadLocal(res)

    
    
}
const downloadExcel=async ()=>{
    let res:BinaryData=await exportExcel() as BinaryData
    // console.log(res);
    downloadLocal(res)
}

const change:UploadProps['onChange']=async (file)=>{
    console.log(file);

    // 上传文件
  let params:FormData=new FormData()
  params.append("file",file.raw)
  let res:ResData=await importExcel(params) as ResData

  if(res.code==200){
     table.value?.doRequest(keyword)
     openAdddialog.value=false
  }
    
}

const go=(row)=>{
    router.push("/layout/memberdetail?lead_id="+row.lead_id)
}
const keyword=reactive({
    keyword:''
})
</script>
<style scoped >
</style>
